<template>
    <div id="myCenter">
        <mt-header fixed title="递递快取"></mt-header>
        <div id="personal-head">
            <img id="unloginHead" src="../../assets/myLoginHead.png"/></br>
            <input type="button" class="registerAndEntry" value="注册" @click="showRegisterFn">
            <span>|</span>
            <input type="button" class="registerAndEntry" value="登录"  @click="showdengluFn">
            <mt-popup v-model="showRegister"   popup-transition="popup-fade">
                        <div class="popup-content">
                            <img src="../../assets/huo.png" >
                            <mt-field label="用户名" placeholder="请输入用户名"></mt-field>
                            <mt-field label="邮箱" placeholder="请输入邮箱" type="email"></mt-field>
                            <mt-field label="密码" placeholder="请输入密码" type="password"></mt-field>
                            <mt-field label="确认密码" placeholder="请输入密码" type="password"></mt-field>
                            <mt-field label="手机号" placeholder="请输入手机号" type="tel"></mt-field>
                            <mt-field label="生日" placeholder="请输入生日" type="date"></mt-field>
                            <mt-field label="爱好" placeholder="请输入爱好" type="textarea" rows="4"></mt-field>

                            <mt-button @click="closeRegisterFn" id="registerButton">注册</mt-button>
                            <mt-button @click="closeRegisterFn" id="backButton">返回</mt-button>
                        </div>
                    </mt-popup>
                     <mt-popup v-model="showdenglu"   popup-transition="popup-fade">
                                            <div class="personal-popup">
                                                <span><img src="../../assets/huo.png" ></span>
                                                       <br>
                                                       <br>
                                               <fieldset id="personal-denglu">
                                                           <input type="text" id="text1" placeholder="请输入用户名"><br><br>
                                                           <input type="password" id="password" placeholder="请输入密码" ><br>
                                                       </fieldset>
                                                        <br>
                                                        <br>
                                                     <mt-button @click="closedenglurFn" id="backButton">登录</mt-button>
                                                <mt-button @click="closedenglurFn" id="backButton">返回</mt-button>
                                            </div>
                                        </mt-popup>

        </div>
        <div id="myThings">
            <mt-cell title="资料编辑" icon="more" is-link>
                <span></span>
                <img slot="icon" src="../../assets/personal1.png" width="35" height="35">
            </mt-cell>
            <mt-cell title="我的信息" icon="more" is-link>
                <span></span>
                <img slot="icon" src="../../assets/personal2.png" width="35" height="35">
            </mt-cell>
            <mt-cell title="我的快递" icon="more" is-link>
                <span></span>
                <img slot="icon" src="../../assets/personal3.png" width="35" height="35">
            </mt-cell>
            <mt-cell title="运费时效" icon="more" is-link>
                <span></span>
                <img slot="icon" src="../../assets/personal4.png" width="35" height="35">
            </mt-cell>
            <mt-cell title="检查更新" icon="more" is-link>
                <span></span>
                <img slot="icon" src="../../assets/personal5.png" width="35" height="35">
            </mt-cell>
            <mt-cell title="意见反馈" icon="more" is-link>
                <span></span>
                <img slot="icon" src="../../assets/personal6.png" width="35" height="35">
            </mt-cell>
            <mt-cell title="关于我们" icon="more" is-link>
                <span></span>
                <img slot="icon" src="../../assets/personal7.png" width="35" height="35">
            </mt-cell>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { Header } from 'mint-ui';
import { Cell } from 'mint-ui';

export default {
 name:'myCenter',
    data () {
        return {
            showRegister : false,
            showdenglu:false
        }
    },
    computed:{
    },
    methods:{
        showRegisterFn(){
            this.showRegister = true;
        },
        closeRegisterFn(){
            this.showRegister = false;
        },
       showdengluFn(){
                      this.showdenglu = true;
                  },
                           closedenglurFn(){
                               this.showdenglu = false;
                           }
    }
}
Vue.component(Header.name, Header);
Vue.component(Cell.name, Cell);
</script>

<style>
#personal-denglu input{
	width:200px;
	height:30px;
	padding: 3px 3px 3px ;
	margin:0 0 5px 0;
	 border: 1px solid #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
}
#personal-denglu input[type="password"]{
    background:url(../../assets/icons.png) no-repeat 3px -63px #ffffff;
	padding:0.3em 0.3em 0.3em 2.5em;
}

#personal-denglu input[type="text"]{
    background:url(../../assets/icons2.2.png) no-repeat 3px -63px #ffffff;
	padding:0.3em 0.3em 0.3em 2.5em;
}
#personal-head{
    width:100%;
    height:150px;
    background:#1E90FF;
    margin-top:5px;
}

#unloginHead{
    width:100px;
    margin-top:5px;
}

.registerAndEntry{
    margin-top:5px;
    background-color:#1E90FF;
    color:#FFF;
    border:none;
    font-family:"黑体";
    font-size:15px;
}

#head span{
    color:white;
}

.mint-cell-title{
    text-align:left;
    margin-left:5px;
}
.popup-content{
    width:320px;
    height:530px;
    color:black;

}
.personal-popup{
width:300px;
height:350px;
 color:black;
}
.popup-content img{
    width:120px;
}
#myThings .mint-cell-wrapper{
    line-height: 3.4;
}
#myThings .mint-cell-text{
    margin-left:10px;
}
</style>